<template>
  <el-row id="collect-datas-container">

    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">采集基础数据</el-menu-item>
        <el-menu-item index="2">采集节点数据</el-menu-item>
      </el-menu>
    </el-row>

    <el-row v-if="collectBaseDatasShow">
      <collect-base-datas></collect-base-datas>
    </el-row>

    <el-row v-if="collectDatasShow">
      <collect-datas></collect-datas>
    </el-row>


  </el-row>
</template>

<script>
  import CollectDatas from "../../../components/CollectDatas/collectDatas";
  import CollectBaseDatas from "../../../components/CollectDatas/collectBaseDatas";
  export default {
    name: "index",
    components: {CollectBaseDatas, CollectDatas},
    data(){
      return {
        activeIndex: '1',
        collectDatasShow: false,
        collectBaseDatasShow: true,
      }
    },
    created() {
      this.$emit('fixHeadIndex', "4")
    },
    methods: {
      handleSelect(key, keyPath){
        this.activeIndex = key
        switch (key) {
          case "1":{
            this.collectDatasShow = false
            this.collectBaseDatasShow = true
            break
          }
          case "2":{
            this.collectDatasShow = true
            this.collectBaseDatasShow = false
            break
          }
        }
      },

    }
  }
</script>

<style lang="scss">

  #collect-datas-container {

    .tittle-nav{
      height: 50px;
      background-color: #17252f;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-menu {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
    }

    .el-menu--horizontal > .el-menu-item {
      height: 50px!important;
      line-height: 50px!important;
      margin: 0;
      border-bottom: 0px solid transparent;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: solid 0px #e6e6e6;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #303133;
      color: #303133;
    }

  }

</style>
